<%@ page import="com.alibaba.fastjson.JSON" %><%--
  Created by IntelliJ IDEA.
  User: 14SR
  Date: 2020/8/19
  Time: 17:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String path = request.getContextPath();%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>i学习</title>
    <link rel="stylesheet" href="<%=path%>/static/css/base.css">
    <link rel="stylesheet" href="<%=path%>/static/css/index.css">
    <link rel="stylesheet" href="<%=path%>/static/css/home.css">
    <script src="<%=path%>/static/js/head.js"></script>
    <script src="<%=path%>/static/js/path.js"></script>
    <script src="<%=path%>/static/js/welcome.js"></script>
    <script src="<%=path%>/static/js/jquery-1.8.2.min.js"></script>
    <script>
        <c:if test="${user == null}">
            var user = <%=JSON.toJSONString(session.getAttribute("user"))%>;
        </c:if>
        function uploadex() {
            var pd=false;
            if(user==null){
                if(confirm("您还未登录。\n请登录后再操作")){
                    window.href="login.jsp"
                }else {
                    return false
                }
                return true;
            }
        }
    </script>
</head>
<body>
<div id="vue_body">

    <!-- 顶部   -->
        <div class="header">
            <div class="width_1200 clearfix">
                <div class="header_right right_f">
                    你好
                    <div class="item uname" v-if="user"><c:if test="${sessionScope.user==null}"><a href="login.jsp">请登录</a></c:if>
                        <c:if test="${sessionScope.user!=null}"><a href="homePage.jsp">,${sessionScope.user.userName}!</a></c:if></div>
                    <div class="item">欢迎来到i学习！</div>
                    <div class="item" ><a href="registration.jsp">[注册]</a></div>
                    <div class="item" onclick="exitLogin()">退出</div>
                    <div class="item service">客服中心</div>
                </div>

            </div>
        </div>

</div>
    <!-- 内容   -->
    <div class="logobox width_1200" style="margin-left: 10%">
        <div class="logo left_f">
            <a href="<%=path%>/index?action=getshowlist"><img src="<%=path%>/static/img/logo.jpeg" width="60" height="120"></a>
        </div>
        <div class="searchbox left_f">
                <div class="input clearfix">
                    <form action="<%=path%>/index?action=getlistbyname" method="post">
                    <input type="text"  style="width: 418px;font-size: 16px" name="videoname" placeholder="请输入关键词">
                        <span><input style="margin-left: 66px; text-index:0px;width: 110px;font-size: 22px;border:#000000 2px solid" type="submit" value="站内搜索"></span>
                    </form>
                </div>

        </div>

        <a class="myclass left_f" rel="nofollow"
           href="<%=path%>/uploadServlet?action=going" onclick="return uploadex()"> <span class="icons"></span>我要上传</a>

    </div>
</div>

<hr style="width:100%;height:3px;">
<div>
<section >

        <table style="margin-left: 10%">
            <tr>
                <td style="margin: 0 1em;font-size:22px;text-align: center;white-space:nowrap;">视频分类：</td>
            <td style="margin-right: 1em;font-size:20px;text-align: center;white-space:nowrap;
            border: skyblue 2px solid;padding:0 1em"  ><a href="<%=path%>/index?action=getshowlist&currentPage=1&type=1"><input type="button" value="Java"></a></td>
            <td style="margin: 0 1em;font-size:20px;text-align: center;white-space:nowrap;
            border: skyblue 2px solid;padding:0 1em"><a href="<%=path%>/index?action=getshowlist&currentPage=1&type=2"><input type="button" value="JQuerry"></a></td>
            <td style="margin: 0 1em;font-size:20px;text-align: center;white-space:nowrap;
            border: skyblue 2px solid;padding:0 1em"><a href="<%=path%>/index?action=getshowlist&currentPage=1&type=3"><input type="button" value="JavaScript"></a></td>
            <td style="margin: 0 1em;font-size:20px;text-align: center;white-space:nowrap;
            border: skyblue 2px solid;padding:0 1em"><a href="<%=path%>/index?action=getshowlist&currentPage=1&type=4"><input type="button" value="HTML"></a></td>
            </tr>

        </table>
    <div style="margin-left: 3%"></div>
        <c:forEach items="${sessionScope.VideoList}" var="video" varStatus="status" >

    <ul class="ul" <c:if test="${status.index%4==0}"> style="margin-left: 5%" </c:if >>
                <li class="li" style="text-align:center;">

                    <a href="<%=path%>/index?action=getvideo&id=${video.videoId}&type=${video.videoType}">
                <img src="<%=path%>/static/${video.videoPicture}" width="100%" height="100%" onclick="return player()">
                    </a>
                 </li>

                 <li class="li" > <span  class="MHover">&nbsp;&nbsp;名&nbsp;&nbsp;&nbsp;称&nbsp;：${video.videoName}</span>
                     <span class="Mall">&nbsp;&nbsp;名&nbsp;&nbsp;&nbsp;称&nbsp;：${video.videoName}</span></li>

                    <li class="li MHover" >&nbsp;&nbsp;简&nbsp;&nbsp;&nbsp;介&nbsp;： ${video.videoDescrtion}
                 </li><li class="li Mall">&nbsp;&nbsp;简&nbsp;&nbsp;&nbsp;介&nbsp;： ${video.videoDescrtion}
    </li>
                <li class="li">
                    上&nbsp;传&nbsp;者&nbsp;： ${video.videoUploadUser}
                 </li>
        <li class="li">播放消耗：${video.videoConsume} 积分</li>
                    <li class="li">上传时间：${video.videoUploadTime}</li>

            </ul>
            <c:if test="${status.index%4==3}"> <br> </c:if >
        </c:forEach>
<div style="margin-right: 3%"></div>
    <div class="pages" style="text-align: right; margin-right: 10%">
        <c:choose>
            <c:when test="${page.pageCount <= 5}">
                <c:set var="begin" value="1"/>
                <c:set var="end" value="${page.pageCount}"/>
            </c:when>
            <%--页数超过了6页--%>
            <c:otherwise>
                <c:set var="begin" value="${page.pageNo-1}"/>
                <c:set var="end" value="${page.pageNo+2}"/>
                <%--如果begin减1后为0,设置起始页为1,最大页为4--%>
                <c:if test="${begin -1 <= 0}">
                    <c:set var="begin" value="1"/>
                    <c:set var="end" value="4"/>
                </c:if>
                <%--如果end超过最大页,设置起始页=最大页-5--%>
                <c:if test="${end > page.pageCount}">
                    <c:set var="begin" value="${page.pageCount - 3}"/>
                    <c:set var="end" value="${page.pageCount}"/>
                </c:if>
            </c:otherwise>
        </c:choose>
        <a style="margin-left: 8px;font-size: 26px" href="<%=path%>/index?action=getshowlist&currentPage=1" class="p_pre">首页</a>
        <c:if test="${page.pageNo>1}">
            <a style="margin-left: 8px;font-size: 26px" href="<%=path%>/index?action=getshowlist&currentPage=${page.pageNo-1}" class="p_pre">上一页</a>
        </c:if>
        <c:forEach var="i" begin="${begin}" end="${end}">
            <%--当前页,选中--%>
            <a style="margin-left: 8px;font-size: 26px" href="<%=path%>/index?action=getshowlist&currentPage=${i}" <c:if test="${(page.pageNo)==i}">style="background-color:antiquewhite"</c:if>>${i}</a>
        </c:forEach>
        <c:if test="${page.pageNo<page.pageCount}">
            <a style="margin-left: 8px;font-size: 26px" href="<%=path%>/index?action=getshowlist&currentPage=${page.pageNo+1}" class="p_pre">下一页</a>
        </c:if>
        <a style="margin-left: 8px;font-size: 26px" href="<%=path%>/index?action=getshowlist&currentPage=${page.pageCount}" class="p_pre">尾页</a>
    </div>
</div>
</div>
</div>
</section>
</div>
<div>

</div>
<footer>
<!--  底部  -->

    <hr/>
    <jsp:include page="include/foot.jsp"></jsp:include>

<script type="text/javascript">
    $(document).ready(function () {
        $(".Mall").hide();
        $(".MHover").mouseover(function (e) {
            $(this).next(".Mall").css({"position":"absolute","top":e.pageY-130,"left":e.pageX+5}).show();
        });
        $(".MHover").mousemove(function (e) {
            $(this).next(".Mall").css({ "color": "skyblue", "position": "absolute", "width":"200px", "opacity": "1",  "top": e.pageY -130, "left": e.pageX + 5 });
        });
        $(".MHover").mouseout(function () {
            $(this).next(".Mall").hide();
        });
    });

</script>
</footer>
</body>
</html>